<template>
  <div>
    <div class="whole">
      <!-- 名称 -->
      <Logo></Logo>
      <!-- 注册信息 -->
      <div class="information">
        <van-form @submit="onSubmit">
          <van-field
            v-model="loginName"
            name="账号"
            label="账号"
            placeholder="账号"
            :clearable="true"
            :rules="phoneRules"
          />
          <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :clearable="true"
            :rules="codeRules"
          />
          <van-field
            v-model="confirm"
            type="password"
            name="确认密码"
            label="确认密码"
            placeholder="确认密码"
            :clearable="true"
            :rules="codeRules"
          />
          <van-field
            v-model="userName"
            name="昵称"
            label="昵称"
            placeholder="昵称"
            :clearable="true"
            :rules="user"
          />
          <van-field
            v-model="phonenumber"
            name="手机号"
            label="手机号"
            placeholder="手机号"
            :clearable="true"
            :rules="phones"
          />
          <van-field
            v-model="code"
            center
            clearable
            label="短信验证码"
            placeholder="请输入短信验证码"
            :rules="Codes"
          >
            <van-button slot="button" size="small" type="info" @click="hair">发送验证码</van-button>
          </van-field>
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit" @click="onSubmit">注册</van-button>
          </div>
        </van-form>
      </div>
      <!-- 底部 -->
      <div class="register">
        <router-link to="/Login">快速登录</router-link>|
        <router-link to="/forget">忘记密码</router-link>|
        <router-link to="" @click.native="$router.push('/index')">随便逛逛</router-link>
      </div>
    </div>
  </div>
</template>
<script>
import {Verification} from '../api/User-api'
import {registry} from '../api/User-api'
import Logo from "../components/Logo.vue"
export default {
  data() {
    return {
      loginName: "",
      userName: "",
      password: "",
      phonenumber: "",
      code: "",
      confirm: "",
      // 账号验证
      phoneRules: [
        { required: true, message: "请输入账号" },
        {
          validator: this.phoneValidator,
          message: "只能为字母和数字且长度在4-10个字符"
        },
        { validator: this.empty, message: "请输入账号" }
      ],
      // 密码验证
      codeRules: [
        { required: true, message: "请输入密码" },
        { validator: this.codeRule, message: "长度在6-10个字符" },
        { validator: this.empty, message: "请输入确认密码" },
        { validator: this.Yanzheng, message: "两次输入的密码不一致" }
      ],
      // 手机号验证
      phones: [
        { required: true, message: "请输入手机号" },
        { validator: this.phone, message: "格式错误 应为11位数字" }
      ],
      // 短信验证
      Codes:[
        { required: true, message: "请输入验证码" },
        { validator: this.phone, message: "验证码错误" }
      ],
      // 昵称验证
      user: [
        { required: true, message: "请输入昵称" },
        { validator: this.User, message: "不能为空" }
      ]
    };
  },
  components:{
    Logo
  },
  methods: {
    phoneValidator(val) {
      return /^[a-zA-Z0-9]{4,10}$/.test(val);
    },
    empty(val) {
      if (val == null) {
        return false;
      }
    },
    codeRule(val) {
      return /^[a-zA-Z0-9]{6,10}$/.test(val);
    },
    //   验证两次输入密码是否正确
    Yanzheng() {
      if (this.password != this.confirm) {
        this.$notify({
          type: "danger",
          message: "两次输入的密码不一致"
        });
        return false;
      }
    },
    // 手机号验证
    phone(val) {
      return /\d{11}$/.test(val);
    },
    hair(){
      Verification(this.phonenumber).then(res=>{
      console.log(res.code);
      })
    },
    // 短信验证
    codes(val){
      return val == null;
    },
    User(val) {
      return val != null;
    },
    onSubmit(){
      registry(this.loginName,this.code,this.phonenumber,this.password,this.userName).then(res =>{
        console.log("已提交",res);
        if(res.code == 500){
          this.$notify({
            type:"danger",
            message:res.msg
          })
        }else{
        this.$router.push({name:'User'});
        }
      })
    }
  }
};
</script>
<style lang="less" scoped>
.register {
    margin-top:210px;
    text-align: center; 
    .arrow {
      margin-right: 5px;
    }
  }
</style>